<template>
	<view class="page">
		<view class="main">
			<view class="page-title">
				用户编辑输入
			</view>
			<view class="form-wrap">
				<u-form labelWidth="220rpx">
					<u-form-item label="企业名称：" prop="name" borderBottom required>
						<u-input v-model="company.name" border="none" inputAlign="right" placeholder="请输入企业名称" />
					</u-form-item>
					<u-form-item label="职务：" prop="position" borderBottom>
						<u-input v-model="member.position" border="none" inputAlign="right" placeholder="请输入职务" />
					</u-form-item>
					<u-form-item v-if="company.type==0" label="销售渠道：" prop="xsqd" borderBottom>
						<u-input v-model="member.xsqd" border="none" inputAlign="right" placeholder="请输入销售渠道" />
					</u-form-item>
					<u-form-item label="负责区域：" prop="fzqy" @click="fzqyShow = true" v-if="company.type==='1'">
						<u-input v-model="member.fzqy" placeholder="点击选择" border="none" inputAlign="right" disabled
							disabledColor="#ffffff" />
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</u-form>
			</view>
			<view class="page-title">
				用户已授权选择，点击可修改
			</view>
			<view class="form-wrap">
				<u-form labelWidth="220rpx">
					<u-form-item label="姓名：" prop="name" borderBottom required>
						<u-input v-model="member.name" border="none" inputAlign="right" placeholder="请输入姓名"
							type="nickname" />
					</u-form-item>
					<u-form-item label="电话：" prop="mobile" borderBottom>
						<u-input v-model="member.mobile" border="none" inputAlign="right" placeholder="请输入电话" />
					</u-form-item>
					<u-form-item label="头像：" prop="headImg" borderBottom>
						<view class="tx-wrap">
							<u-avatar size="80rpx" :src="member.headImg?fileServer+member.headImg:null"
								@click="onChooseAvatar"></u-avatar>
						</view>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="身份：" prop="shenfen" borderBottom>
						<u-input v-model="member.shenfen" placeholder="" border="none" inputAlign="right" disabled
							disabledColor="#ffffff" />
						<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
					</u-form-item>
					<u-form-item label="行业分类：" prop="hyflInfo" @click="toHyfl()">
						<u-input v-model="member.hyflInfo" placeholder="点击选择" border="none" inputAlign="right" disabled
							disabledColor="#ffffff" />
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</u-form>
			</view>
		</view>
		<view class="btm-wrap-tc">

		</view>
		<view class="btm-wrap">
			<view class="btn return-btn" @click="toLook">
				名片预览
			</view>
			<view class="btn confim-btn" @click="submit">
				保存
			</view>
		</view>
		<u-popup :show="fzqyShow" @close="fzqyShow = false">
			<view style="padding: 32rpx;">
				<u-checkbox-group v-model="member.fzqy" placement="column">
					<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in fuzeArea" :key="index"
						:label="item.dictLabel" :name="item.dictLabel">
					</u-checkbox>
				</u-checkbox-group>
				<u-button type="primary" shape="circle" text="确定" @click="fzqyShow = false"></u-button>
			</view>
		</u-popup>
		<u-modal :show="userInfoShow" title="初次登录,请完善用户信息">
			<view>
				<view style="text-align: center;">
					<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
						style="padding: 0;display: inline-block;">
						<u-avatar shape="square" :src="userInfo.headImg?fileServer+userInfo.headImg:null"></u-avatar>
					</button>
				</view>
				<view style="margin-top: 20rpx;">
					<u-input placeholder="请输入昵称" border="surround" v-model="userInfo.ncName" type="nickname"></u-input>
				</view>
			</view>
			<u-button text="一键获取手机号并绑定用户信息" open-type="getPhoneNumber" @getphonenumber="getphonenumber"
				slot="confirmButton" type="primary" plain></u-button>
		</u-modal>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfoShow:false,
				fzqyShow: false,
				userInfo:{headImg:'',ncName:''},
				member: {type:'',name:'',mobile:'',headImg:'',hyflInfo:'',fzqy:'',position:'',xsqd:''},
				company: {
					"name": "",
					"zypphcp": "",
					"fzqy": [],
					"address": "",
				},
				fileServer: this.$fileServer,
				shenfenInfo: [],
				fuzeArea: [],
				
				form: {
					"address": "",
					"area": "",
					"city": "",
					"fzqy": "",
					"headImg": "",
					"hyfl": "",
					"lat": "",
					"lng": "",
					"memberId": "",
					"memberName": "",
					"mobile": "",
					"position": "",
					"xsqd":"",
					"province": "",
					"qyName": "",
					"shenfen": "",
					"zypphcp": ""
				},
				yqrId:"",//邀请人Id
				gsId:'',//公司Id
			};
		},
		onLoad(e) {
			if(e.yqrId){
				this.yqrId = e.yqrId
			}
			if(e.gsId){
				this.gsId = e.gsId
				this.$api.company.getCompanyById({companyId:e.gsId}).then(res => {
					if(res.flag){
						let data = res.data;
						this.company = data;
						// 0-经销商；1-厂家；2-产业链
						if(data.type==0){
							this.member.shenfen = '经销商'
						}else if(data.type==1){
							this.member.shenfen = '厂家'
						}else if(data.type==2){
							this.member.shenfen = '产业链'
						}
						
						// this.member.type = 
						if(!uni.getStorageSync('memberId')){
							this.toLogin();
						}
					}
				})
				
			}
			// this.getUserInfo()
			// this.getDict()
		},
		onShow() {
			if(uni.getStorageSync('memberId')){
				this.getUserInfoHY()
			}
		},
		methods: {
			toLogin() {
				uni.login({
					provider: "weixin",
					success: (loginRes) => {
						if (loginRes.errMsg === "login:ok") {
							// code: loginRes.code
							this.$api.member.wxAuthLogin({
								code: loginRes.code,
								companyId:this.gsId,
								yqrId:this.yqrId,
							}).then(res => {
								this.userInfo = res.data
								uni.setStorageSync('memberId', res.data.id)
								if(res.data.companyId){
									uni.setStorageSync('companyId', res.data.companyId||'');
								}
								this.userInfoShow = true
								if (uni.$u.test.isEmpty(res.data.name) || uni.$u.test.isEmpty(res.data
										.mobile)) {
									this.userInfoShow = true
								} 
							})
						}
					},
					complete(e) {
						console.log('rese', e);
					}
				})
			},
			getphonenumber(code) {
				this.$api.member.wxAuthMobile({
					"headImg": this.userInfo.headImg,
					"ncName": this.userInfo.ncName,
					code: code.detail.code
				}).then(res => {
					this.userInfo = res.data
					let member = res.data
					let shenfen = this.member.shenfen;
					this.member = {...member,shenfen}
					this.userInfoShow = false
					
				})
			},
			
			extractProvinceCityDistrict(address) {
				// 定义省市区的正则表达式
				const regex = /(.*?[省市自治区壮回维吾尔苗藏土蒙古哈达])?(.*?[市区县旗])?(.*?区)?/;

				// 使用正则表达式匹配地址
				const matches = address.match(regex);

				// 提取匹配的省、市、区信息
				const province = matches[1] || '';
				const city = matches[2] || '';
				const district = matches[3] || '';

				return {
					province,
					city,
					district
				};
			},
			chooseAds() {
				uni.chooseLocation({
					success: (res) => {
						console.log('res', res);
						let qy = this.extractProvinceCityDistrict(res.address)
						console.log('qy', qy);
						this.form.province = qy.province
						this.form.city = qy.city
						this.form.area = qy.district
						this.form.address = res.address
						this.company.address = res.address
						this.form.lat = res.latitude
						this.form.lng = res.longitude
					}
				})
			},
			toLook() {
				uni.navigateTo({
					url: "/pages/card/cardIndex/cardIndex?type=look",
					success: (res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', {
							member: this.member,
							company: this.company
						})
					}

				})
			},
			submit() {
				if (uni.$u.test.isEmpty(this.company.name)) {
					uni.showToast({
						title: "请输入企业名称",
						icon: "none"
					})
					return false
				}
				if (uni.$u.test.isEmpty(this.member.name)) {
					uni.showToast({
						title: "请输入姓名",
						icon: "none"
					})
					return false
				}
				let form = {
					...this.form,
					fzqy: this.member.fzqy?this.member.fzqy.join(','):'',
					headImg: this.member.headImg,
					hyfl: this.member.hyfl,
					memberName: this.member.name,
					mobile: this.member.mobile,
					position: this.member.position,
					qyName: this.company.name,
					shenfen: this.member.shenfen,
					zypphcp: this.company.zypphcp,
					xsqd:this.member.xsqd,
					companyId:this.company.id||'',
				}
				this.$api.member.updateMemberMingpian(form).then(res => {
					uni.showToast({
						title: "完善成功",
					})
					if(res.flag){
						setTimeout(() => {
							uni.switchTab({
								url:'/pages/tabBar/index/index'
							})
						}, 1500)
					}
				})
			},
			selectSF() {
				uni.showActionSheet({
					itemList: this.shenfenInfo.map(i => {
						return i.dictLabel
					}),
					success: (res) => {
						this.member.shenfen = this.shenfenInfo[res.tapIndex].dictLabel
						this.$forceUpdate()
					}
				})
			},
			getDict() {
				this.$api.member.getDictList('shenfenInfoCode').then(res => {
					this.shenfenInfo = res.data
				})
				this.$api.member.getDictList('fuzeAreaCode').then(res => {
					this.fuzeArea = res.data
				})
			},
			toHyfl() {
				uni.navigateTo({
					url: "/pages/card/hyflSelect/hyflSelect?type=" + this.company.type
				})
			},
			onChooseAvatar(res) {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: this.$serverUrl + '/api/member/uploadFile.client', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'upload',
							success: (uploadFileRes) => {
								this.member.headImg = JSON.parse(uploadFileRes.data).data
								this.userInfo.headImg = JSON.parse(uploadFileRes.data).data
							}
						});
					}
				});
			},
			getUserInfoHY() {
				this.$api.member.getMemberInfo().then(res => {
					this.member.hyfl = res.data.member.hyfl
					this.member.hyflInfo = res.data.member.hyflInfo
				})
			},
			getUserInfo() {
				this.$api.member.getMemberInfo().then(res => {
					if (res.data.member.fzqy) {
						res.data.member.fzqy = res.data.member.fzqy.split(',')
					}
					if (res.data.member.type == '0') {
						res.data.member.shenfen = '经销商'
					} else if (res.data.member.type == '1') {
						res.data.member.shenfen = '厂家'
					} else if (res.data.member.type == '2') {
						res.data.member.shenfen = '产业链'
					}
					this.member = res.data.member
					if (this.member.companyId) {
						this.company = res.data.company
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #F5F5F5;min-height: 100vh;

		.main {
			position: relative;
			padding: 0 30rpx;

			.page-title {
				height: 80rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				font-weight: bold;
			}

			.form-wrap {

				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 0 30rpx;

				.tx-wrap {
					display: flex;
					width: 100%;
					justify-content: flex-end;
				}

				.tx {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;

				}
			}
		}
	}

	.btm-wrap-tc {
		width: 100%;
		height: 170rpx;

	}

	.btm-wrap {
		width: 100%;
		position: fixed;
		bottom: 50rpx;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-around;
		z-index: 99;

		.btn {
			width: 244rpx;
			height: 70rpx;
			border-radius: 42rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;

			&.return-btn {
				border: 1px solid #EC2424;
				color: #EC2424;
				background-color: #FFFFFF;
			}

			&.confim-btn {
				color: #FFFFFF;
				background: #EC2424;
			}
		}
	}
</style>